<template>
	<main class="flex pt-20">
		<!-- 左侧导航菜单 -->
		<aside class="w-64 mr-8 sticky top-20 self-start">
			<nav>
				<ul>
					<li>
						<a href="#" data-target="registrations"
							class="nav-link block py-3 px-6 text-gray-700 hover:text-blue-600 font-medium transition-all duration-200"
							:class="{ 'active text-blue-600 border-l-4 border-blue-600': activeSection === 'registrations' }"
							@click="handleNavClick">
							<iconify-icon icon="mdi:clipboard-list" class="mr-2"></iconify-icon>
							我的报名
						</a>
					</li>
					<li>
						<a href="#" data-target="schedule"
							class="nav-link block py-3 px-6 text-gray-700 hover:text-blue-600 font-medium transition-all duration-200"
							:class="{ 'active text-blue-600 border-l-4 border-blue-600': activeSection === 'schedule' }"
							@click="handleNavClick">
							<iconify-icon icon="mdi:calendar-clock" class="mr-2"></iconify-icon>
							赛程安排
						</a>
					</li>
					<li>
						<a href="#" data-target="rankings"
							class="nav-link block py-3 px-6 text-gray-700 hover:text-blue-600 font-medium transition-all duration-200"
							:class="{ 'active text-blue-600 border-l-4 border-blue-600': activeSection === 'rankings' }"
							@click="handleNavClick">
							<iconify-icon icon="mdi:podium" class="mr-2"></iconify-icon>
							成绩排名
						</a>
					</li>
					<li>
						<a href="#" @click="tuiChu">退出登录</a>
					</li>
				</ul>
			</nav>
		</aside>


		<!-- 中央内容区 -->
		<div class="flex-1 p-6 bg-gray-50 min-h-screen">
			<!-- 消息提示 -->
			<div v-if="showMessage" class="mb-4 p-4 rounded-lg bg-green-100 text-green-800 border border-green-200">
				{{ messageText }}
			</div>

			<!-- 我的报名 -->
			<section id="registrations" class="content-section" v-show="activeSection === 'registrations'">
				<!-- 已报名表格 -->
				<div class="card mb-6">
					<h1 class="text-2xl font-bold text-gray-800 mb-2">我的报名</h1>
					<p class="text-gray-600 mb-6">您已报名的赛事项目及状态</p>

					<table class="min-w-full bg-white rounded-lg overflow-hidden">
						<thead>
							<tr class="bg-gray-100">
								<th
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									项目</th>
								<th
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									时间</th>
								<th
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									地点</th>
								<th
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									状态</th>
								<th
									class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									操作</th>
							</tr>
						</thead>
						<tbody class="divide-y divide-gray-200">
							<!-- 动态渲染报名项目 -->
							<tr v-for="(item, index) in myRegistrations" :key="index"
								class="hover:bg-gray-50 transition-colors duration-150">
								<td class="px-6 py-4 whitespace-nowrap">
									<div class="flex items-center">
										<iconify-icon :icon="getEventIcon(item.name)" class="text-xl mr-3"
											:class="getEventColor(item.name)"></iconify-icon>
										<div>
											<div class="text-sm font-medium text-gray-900">{{ item.name }}</div>
											<div class="text-sm text-gray-500">{{ item.group }}</div>
										</div>
									</div>
								</td>
								<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.time }}</td>
								<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.place }}</td>
								<td class="px-6 py-4 whitespace-nowrap">
									<span class="status-badge px-3 py-1 rounded-full text-xs inline-flex items-center"
										:class="getStatusClass(item.status)">
										<iconify-icon :icon="getStatusIcon(item.status)" class="mr-1"></iconify-icon>
										{{ item.statusText }}
									</span>
								</td>
								<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
									<button v-if="item.status === 'confirmed' || item.status === 'pending'"
										class="text-red-600 hover:text-red-900 transition-colors mr-3"
										@click="cancelRegistration(item)">
										取消报名
									</button>
									<button v-if="item.status === 'pending'"
										class="text-blue-600 hover:text-blue-900 transition-colors"
										@click="editRegistration(item)">
										编辑
									</button>
									<button v-if="item.status === 'cancelled'"
										class="text-green-600 hover:text-green-900 transition-colors"
										@click="reRegister(item)">
										重新报名
									</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<!-- 可报名项目 -->
				<div class="mt-8">
					<h2 class="text-xl font-bold text-gray-800 mb-4">可报名项目</h2>
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
						<!-- 动态渲染可报名项目 -->
						<div v-for="(project, index) in availableProjects" :key="index"
							class="card p-6 hover:shadow-lg transition-shadow duration-300">
							<div class="flex justify-between items-start mb-4">
								<div>
									<h3 class="font-bold text-gray-800 text-lg">{{ project.name }}</h3>
									<p class="text-sm text-gray-500 mt-1">{{ project.group }}</p>
								</div>
								<iconify-icon :icon="project.icon" class="text-3xl"
									:style="{ color: project.color }"></iconify-icon>
							</div>
							<div class="flex justify-between items-center mt-4">
								<span
									class="event-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">
									{{ project.type }}
								</span>
								<button
									class="btn-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-500 transition-colors"
									@click="signupProject(project)">
									立即报名
								</button>
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- 赛程安排 -->
			<section id="schedule" class="content-section" v-show="activeSection === 'schedule'">
				<div class="mb-6">
					<h1 class="text-2xl font-bold text-gray-800 mb-2">赛程安排</h1>
					<p class="text-gray-600">第25届校园运动会完整赛程表</p>
				</div>

				<!-- 日期切换按钮 -->
				<div class="flex mb-6 space-x-3">
					<button class="px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200"
						:class="activeDate === '10月15日' ? 'bg-orange-500 text-white shadow-md' : 'bg-white text-gray-700 border border-gray-300 hover:border-gray-400'"
						@click="activeDate = '10月15日'">
						10月15日
					</button>
					<button class="px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200"
						:class="activeDate === '10月16日' ? 'bg-orange-500 text-white shadow-md' : 'bg-white text-gray-700 border border-gray-300 hover:border-gray-400'"
						@click="activeDate = '10月16日'">
						10月16日
					</button>
					<button class="px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200"
						:class="activeDate === '10月17日' ? 'bg-orange-500 text-white shadow-md' : 'bg-white text-gray-700 border border-gray-300 hover:border-gray-400'"
						@click="activeDate = '10月17日'">
						10月17日
					</button>
				</div>

				<!-- 当日赛程卡片 -->
				<div class="card p-6">
					<h2 class="text-xl font-bold text-gray-800 mb-6">{{ activeDate }}赛程</h2>
					<div class="space-y-4">
						<!-- 10月15日赛程 -->
						<template v-if="activeDate === '10月15日'">
							<div
								class="border-l-4 border-blue-500 pl-4 py-3 hover:bg-blue-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">开幕式</h3>
									<span class="text-sm text-gray-500 bg-blue-100 px-2 py-1 rounded">08:30 -
										09:00</span>
								</div>
								<p class="text-gray-600">主田径场</p>
							</div>
							<div
								class="border-l-4 border-orange-500 pl-4 py-3 hover:bg-orange-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">100米短跑预赛</h3>
									<span class="text-sm text-gray-500 bg-orange-100 px-2 py-1 rounded">09:30 -
										10:30</span>
								</div>
								<p class="text-gray-600">主田径场 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-green-500 pl-4 py-3 hover:bg-green-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">跳高预赛</h3>
									<span class="text-sm text-gray-500 bg-green-100 px-2 py-1 rounded">10:45 -
										12:00</span>
								</div>
								<p class="text-gray-600">田径场北区 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-purple-500 pl-4 py-3 hover:bg-purple-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">铅球预赛</h3>
									<span class="text-sm text-gray-500 bg-purple-100 px-2 py-1 rounded">14:00 -
										15:30</span>
								</div>
								<p class="text-gray-600">田径场东区 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-blue-500 pl-4 py-3 hover:bg-blue-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">4×100接力预赛</h3>
									<span class="text-sm text-gray-500 bg-blue-100 px-2 py-1 rounded">16:00 -
										17:30</span>
								</div>
								<p class="text-gray-600">主田径场 | 各院系代表队</p>
							</div>
						</template>

						<!-- 10月16日赛程 -->
						<template v-else-if="activeDate === '10月16日'">
							<div
								class="border-l-4 border-blue-500 pl-4 py-3 hover:bg-blue-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">100米短跑决赛</h3>
									<span class="text-sm text-gray-500 bg-blue-100 px-2 py-1 rounded">09:00 -
										10:00</span>
								</div>
								<p class="text-gray-600">主田径场 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-orange-500 pl-4 py-3 hover:bg-orange-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">跳远决赛</h3>
									<span class="text-sm text-gray-500 bg-orange-100 px-2 py-1 rounded">10:30 -
										11:30</span>
								</div>
								<p class="text-gray-600">沙坑场地 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-green-500 pl-4 py-3 hover:bg-green-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">篮球小组赛</h3>
									<span class="text-sm text-gray-500 bg-green-100 px-2 py-1 rounded">14:00 -
										16:30</span>
								</div>
								<p class="text-gray-600">篮球场1-3号场 | 各院系代表队</p>
							</div>
						</template>

						<!-- 10月17日赛程 -->
						<template v-else-if="activeDate === '10月17日'">
							<div
								class="border-l-4 border-blue-500 pl-4 py-3 hover:bg-blue-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">4×100接力决赛</h3>
									<span class="text-sm text-gray-500 bg-blue-100 px-2 py-1 rounded">09:30 -
										10:30</span>
								</div>
								<p class="text-gray-600">主田径场 | 各院系代表队</p>
							</div>
							<div
								class="border-l-4 border-orange-500 pl-4 py-3 hover:bg-orange-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">羽毛球双打决赛</h3>
									<span class="text-sm text-gray-500 bg-orange-100 px-2 py-1 rounded">11:00 -
										12:00</span>
								</div>
								<p class="text-gray-600">羽毛球馆 | 男子组/女子组</p>
							</div>
							<div
								class="border-l-4 border-green-500 pl-4 py-3 hover:bg-green-50 rounded-r transition-colors">
								<div class="flex justify-between items-center mb-1">
									<h3 class="font-bold text-gray-800">闭幕式 & 颁奖仪式</h3>
									<span class="text-sm text-gray-500 bg-green-100 px-2 py-1 rounded">14:30 -
										15:30</span>
								</div>
								<p class="text-gray-600">主田径场 | 全体参赛人员</p>
							</div>
						</template>
					</div>
				</div>
			</section>

			<!-- 成绩排名 -->
			<section id="rankings" class="content-section" v-show="activeSection === 'rankings'">
				<div class="mb-6">
					<h1 class="text-2xl font-bold text-gray-800 mb-2">成绩排名</h1>
					<p class="text-gray-600">各项目比赛成绩与排名</p>
				</div>

				<!-- 项目排名卡片组 -->
				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
					<!-- 100米短跑排名 -->
					<div class="card p-6">
						<h2 class="text-xl font-bold text-gray-800 mb-4">100米短跑排名</h2>
						<div class="space-y-3">
							<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">1</span>
									<span class="font-medium">张伟</span>
								</div>
								<span class="font-mono text-blue-600 font-bold">10.58秒</span>
							</div>
							<div
								class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-gray-300 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold mr-3">2</span>
									<span class="font-medium">李华</span>
								</div>
								<span class="font-mono text-gray-600">10.72秒</span>
							</div>
							<div
								class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-yellow-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">3</span>
									<span class="font-medium">王明</span>
								</div>
								<span class="font-mono text-gray-600">10.89秒</span>
							</div>
						</div>
					</div>

					<!-- 跳远排名 -->
					<div class="card p-6">
						<h2 class="text-xl font-bold text-gray-800 mb-4">跳远排名</h2>
						<div class="space-y-3">
							<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">1</span>
									<span class="font-medium">陈晓</span>
								</div>
								<span class="font-mono text-blue-600 font-bold">6.85米</span>
							</div>
							<div
								class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-gray-300 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold mr-3">2</span>
									<span class="font-medium">赵雷</span>
								</div>
								<span class="font-mono text-gray-600">6.72米</span>
							</div>
							<div
								class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
								<div class="flex items-center">
									<span
										class="w-6 h-6 bg-yellow-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">3</span>
									<span class="font-medium">孙阳</span>
								</div>
								<span class="font-mono text-gray-600">6.68米</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 院系积分榜 -->
				<div class="card p-6">
					<h2 class="text-xl font-bold text-gray-800 mb-4">院系积分榜</h2>
					<div class="space-y-3">
						<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
							<div class="flex items-center">
								<span
									class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">1</span>
								<span class="font-medium">外国语学院</span>
							</div>
							<span class="font-bold text-blue-600">30分</span>
						</div>
						<div
							class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
							<div class="flex items-center">
								<span
									class="w-6 h-6 bg-gray-400 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">2</span>
								<span class="font-medium">经济管理学院</span>
							</div>
							<span class="font-medium text-gray-600">29分</span>
						</div>
						<div
							class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
							<div class="flex items-center">
								<span
									class="w-6 h-6 bg-yellow-500 text-white rounded-full flex items-center justify-center text-xs font-bold mr-3">3</span>
								<span class="font-medium">机械工程学院</span>
							</div>
							<span class="font-medium text-gray-600">28分</span>
						</div>
						<div
							class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
							<div class="flex items-center">
								<span
									class="w-6 h-6 bg-gray-300 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold mr-3">4</span>
								<span class="font-medium">电子工程学院</span>
							</div>
							<span class="text-gray-600">27分</span>
						</div>
						<div
							class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
							<div class="flex items-center">
								<span
									class="w-6 h-6 bg-gray-300 text-gray-700 rounded-full flex items-center justify-center text-xs font-bold mr-3">5</span>
								<span class="font-medium">计算机学院</span>
							</div>
							<span class="text-gray-600">26分</span>
						</div>
					</div>
				</div>
			</section>
		</div>
	</main>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // useRouter从vue-router导入（路由用）
	const router = useRouter();

	// 控制内容区显示状态
	const activeSection = ref('registrations');
	// 控制日期切换
	const activeDate = ref('10月15日');
	// 消息提示状态
	const showMessage = ref(false);
	const messageText = ref('');

	// 我的报名数据
	const myRegistrations = ref([{
			name: '100米短跑',
			group: '男子组',
			time: '10月15日 09:30',
			place: '主田径场',
			status: 'confirmed',
			statusText: '已确认',
			icon: 'mdi:run'
		},
		{
			name: '跳远',
			group: '男子组',
			time: '10月16日 14:00',
			place: '沙坑场地',
			status: 'pending',
			statusText: '待审核',
			icon: 'mdi:jump-rope'
		},
		{
			name: '4×100接力',
			group: '团队项目',
			time: '10月17日 10:45',
			place: '主田径场',
			status: 'confirmed',
			statusText: '已确认',
			icon: 'mdi:relay'
		}
	]);

	// 可报名项目数据
	const availableProjects = ref([{
			name: '篮球比赛',
			group: '男子组/女子组',
			type: '团队项目',
			icon: 'mdi:basketball',
			color: '#f97316'
		},
		{
			name: '铅球',
			group: '男子组/女子组',
			type: '个人项目',
			icon: 'mdi:weight',
			color: '#6b7280'
		},
		{
			name: '羽毛球',
			group: '单打/双打',
			type: '团队项目',
			icon: 'mdi:badminton',
			color: '#ef4444'
		}
	]);

	// 显示消息提示
	const showMessageAlert = (message) => {
		messageText.value = message;
		showMessage.value = true;
		setTimeout(() => {
			showMessage.value = false;
		}, 3000);
	};

	// 左侧导航切换
	const handleNavClick = (e) => {
		e.preventDefault();
		const target = e.currentTarget.getAttribute('data-target');
		activeSection.value = target;
	};
	//退出登录
	const tuiChu=()=>{
		router.push({name:'total'});
	}

	// 获取项目图标
	const getEventIcon = (eventName) => {
		const icons = {
			'100米短跑': 'mdi:run',
			'跳远': 'mdi:jump-rope',
			'4×100接力': 'mdi:relay',
			'篮球比赛': 'mdi:basketball',
			'铅球': 'mdi:weight',
			'羽毛球': 'mdi:badminton'
		};
		return icons[eventName] || 'mdi:help';
	};

	// 获取项目颜色
	const getEventColor = (eventName) => {
		const colors = {
			'100米短跑': 'text-blue-600',
			'跳远': 'text-orange-500',
			'4×100接力': 'text-green-500',
			'篮球比赛': 'text-orange-500',
			'铅球': 'text-gray-600',
			'羽毛球': 'text-red-500'
		};
		return colors[eventName] || 'text-gray-600';
	};

	// 获取状态样式
	const getStatusClass = (status) => {
		const classes = {
			'confirmed': 'bg-green-100 text-green-800',
			'pending': 'bg-yellow-100 text-yellow-800',
			'cancelled': 'bg-red-100 text-red-800'
		};
		return classes[status] || 'bg-gray-100 text-gray-800';
	};

	// 获取状态图标
	const getStatusIcon = (status) => {
		const icons = {
			'confirmed': 'mdi:check-circle',
			'pending': 'mdi:clock',
			'cancelled': 'mdi:close-circle'
		};
		return icons[status] || 'mdi:help';
	};

	// 取消报名
	const cancelRegistration = (item) => {
		if (confirm(`确定要取消【${item.name}】项目的报名吗？`)) {
			// 更新状态为已取消
			item.status = 'cancelled';
			item.statusText = '已取消';
			showMessageAlert('取消报名成功！');
		}
	};

	// 编辑报名
	const editRegistration = (item) => {
		showMessageAlert(`进入编辑【${item.name}】项目页面`);
	};

	// 重新报名
	const reRegister = (item) => {
		if (confirm(`确定要重新报名【${item.name}】项目吗？`)) {
			// 更新状态为待审核
			item.status = 'pending';
			item.statusText = '待审核';
			showMessageAlert('重新报名成功！');
		}
	};

	// 报名新项目
	const signupProject = (project) => {
		if (confirm(`确定要报名【${project.name}】项目吗？`)) {
			// 检查是否已经报名
			const existingRegistration = myRegistrations.value.find(reg => reg.name === project.name);
			if (existingRegistration) {
				showMessageAlert('您已经报名过该项目！');
				return;
			}

			// 添加新报名项目
			const newRegistration = {
				name: project.name,
				group: project.group,
				time: getEventTime(project.name),
				place: getEventPlace(project.name),
				status: 'pending',
				statusText: '待审核',
				icon: project.icon
			};

			myRegistrations.value.push(newRegistration);
			showMessageAlert(`报名【${project.name}】成功！请等待审核。`);
		}
	};

	// 获取项目时间（模拟数据）
	const getEventTime = (projectName) => {
		const times = {
			'篮球比赛': '10月18日 15:00',
			'铅球': '10月19日 09:00',
			'羽毛球': '10月20日 14:30'
		};
		return times[projectName] || '待定';
	};

	// 获取项目地点（模拟数据）
	const getEventPlace = (projectName) => {
		const places = {
			'篮球比赛': '篮球场',
			'铅球': '田径场东区',
			'羽毛球': '羽毛球馆'
		};
		return places[projectName] || '待定';
	};

	onMounted(() => {
		// 初始化逻辑
	});
</script>

<style scoped>
	.container-1200 {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1rem;
	}

	.card {
		background: white;
		border-radius: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		border: 1px solid #e5e7eb;
	}

	.nav-link {
		transition: all 0.3s ease;
		border-left: 3px solid transparent;
	}

	.nav-link:hover {
		background-color: #f3f4f6;
	}

	.nav-link.active {
		background-color: #eff6ff;
		border-left-color: #2563eb;
	}

	.btn-primary {
		background: linear-gradient(135deg, #f59e0b, #d97706);
		transition: all 0.3s ease;
	}

	.btn-primary:hover {
		background: linear-gradient(135deg, #d97706, #b45309);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
	}

	.status-badge,
	.event-tag {
		display: inline-flex;
		align-items: center;
		font-weight: 500;
	}

	.content-section {
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		aside {
			display: none;
		}

		.flex-1 {
			padding: 1rem;
		}

		.container-1200 {
			padding: 0 1rem;
		}
	}

	/* 表格样式优化 */
	table {
		border-collapse: collapse;
		width: 100%;
	}

	th,
	td {
		padding: 12px 16px;
		text-align: left;
	}

	thead {
		background-color: #f8fafc;
	}

	tbody tr {
		border-bottom: 1px solid #e5e7eb;
		transition: background-color 0.2s ease;
	}

	tbody tr:last-child {
		border-bottom: none;
	}

	/* 排名卡片样式 */
	.space-y-3>div {
		transition: all 0.3s ease;
	}

	.space-y-3>div:hover {
		transform: translateX(4px);
	}
</style>